<template>
  <div>
    <div class="img_wrap">
      <div id="zhu"></div>
      <div id="bing"></div>
      <div id="zhe"></div>
      <div id="charts1"></div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  name: "home",
  data () {
    return {
      videoList: []
    }
  },
  created () {
    // 获取管理员和学员数据
    Promise.all([this.getAdminAction({ pageStart: 1 }), this.getStudentAction({ pageStart: 1 })]).then(res => {
      console.log(res)
      this.zhu();
      this.bing();

    })

    // 请求回来所有视频数据     根据尾页请求所有视频
    this.getVideoAction({ pageStart: 1 }).then(() => {
      for (var i = 1; i < this.endPage; i++) {
        this.getVideoAction({ pageStart: i }).then(res => {
          console.log(res.data.list)
          this.videoList = [...this.videoList, ...res.data.list];
          console.log(this.videoList)

          // 处理绑定的课程数量 添加到新数组  
          var arr = this.videoList.map((item) => {
            return {
              name: item.Vname,
              value: item.Vstate.split(",").length
            }
          })
          console.log(arr)
          //排序 取出前10名
          var newarr = arr.sort(function (a, b) {
            return b.value - a.value
          })
          console.log(newarr)
          newarr.length = 10;
          this.bing(newarr);
        })
      }

    })
  },
  mounted () {
    this.zhe();
  },
  computed: {
    ...mapGetters("adminStore", { "adminTotal": "total" }),
    ...mapGetters("studentStore", { "studentTotal": "total" }),
    ...mapGetters("videoStore", ["endPage"])
  },
  methods: {
    ...mapActions("adminStore", ["getAdminAction"]),
    ...mapActions("studentStore", ["getStudentAction"]),
    ...mapActions("videoStore", ["getVideoAction"]),
    bing (videoArr) { //生成饼状图
      // 1.初始化echarts 需要的元素对象
      var myChart = this.$echarts.init(document.getElementById("bing"));
      // 准备饼状图的配置项
      var option = {
        tooltip: { //提示
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'  //整理提示的格式
        },
        legend: {  //标题
          data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14,
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.adminTotal, name: '管理员' },
              { value: this.studentTotal, name: '学员', selected: true },
            ]
          },
          {
            name: '视频排行榜',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,

              rich: {  //样式部分
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: videoArr  //视频排行数据渲染
          }
        ]
      };
      //3 配置项设置给 echarts 元素\
      myChart.setOption(option)
    },
    zhu () {//生成柱状图

      // 1.初始化echarts 需要的元素对象
      var myChart = this.$echarts.init(document.getElementById("zhu"))
      console.log(myChart)
      //2. 准备好图形配置项
      var data = [this.adminTotal, this.studentTotal]
      console.log(data)
      // console.log(this.adminTotal, this.studentTotal)
      var option = {
        xAxis: {
          max: 'dataMax',
        },
        yAxis: {
          type: 'category',
          data: ['学员', '管理员'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2 // only the largest 3 bars will be displayed
        },
        series: [{
          realtimeSort: true,
          name: '人数统计',
          type: 'bar',
          data: data,// y轴对应的数据
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      };

      // function run () {
      //   var data = option.series[0].data;  //获取图表加载的数据
      //   for (var i = 0; i < data.length; ++i) {
      //     if (Math.random() > 0.9) {
      //       data[i] += Math.round(Math.random() * 2000);
      //     }
      //     else {
      //       data[i] += Math.round(Math.random() * 200);
      //     }
      //   }
      //   myChart.setOption(option);//改变数据 从新设置图表配置项
      // }

      // setTimeout(function () {
      //   run();
      // }, 0);
      // setInterval(function () {
      //   run();
      // }, 3000);
      //3 配置项设置给 echarts 元素
      myChart.setOption(option)
    },
    zhe () { //折线图绘制
      var myChart = this.$echarts.init(document.getElementById("zhe"));
      var option = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      myChart.setOption(option)
    }
  },
} 
</script>
<style lang="less">
.img_wrap {
  width: 1300px;
  margin: 20px auto;
  background: skyblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  > div {
    width: 600px;
    height: 400px;
    margin-top: 40px;
    background: white;
  }
}
</style>